import React from "react";
import RollbackForm from 'components/rollbackForm';
import SearchTable from "components/searchTable/SearchTable.jsx";
import { openNotificationWithIcon } from "utils/comm";
import { connect } from "dva";
import { Modal } from "antd";
import Base from "./Base";

const emptyParams = {
  modelName: '',
  applyUserName: '', // 申请人
  serialNum: '',
  taskName: '',
}
@connect(({
  FlowHandle, loading, appListMenu, Public,
}) => ({
  flowHandleStore: FlowHandle, loading,
  focusApp: appListMenu.focusApp,
  menuDataList: Public.menuDataList,
  resourceList: Public.resourceList,
})) export default class Todo extends Base {
  state = {
    page: {
      pageNum: 1,
      pageSize: 5,
    },
    rollbackVisible: false,
    selectedRows: [],
  }

  rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      this.setState({ selectedRows })
      // const { customedEntrustDataListCheckedKeys } = this.state;
      // this.setState({customedEntrustDataListCheckedKeys:selectedRowKeys})
      // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    // getCheckboxProps: record => ({
    //   disabled: record.name === 'Disabled User', // Column configuration not to be checked
    //   name: record.name,
    // }),
  }

  openNotificationWithIcon = openNotificationWithIcon.bind(this);

  searchParams = emptyParams;

  componentDidMount() {
    this.initData();
  }

  componentDidUpdate(preProps) {
    const { focusApp } = this.props;
    const { focusApp: preFocusApp } = preProps;
    if (preFocusApp.id && `${preFocusApp.id || 0}` !== `${focusApp.id || 0}`) {
      // 应用切换更新页面数据
      this.resetPageData();
    }
  }

  resetPageData = () => {
    const { dispatch } = this.props;
    this.searchParams = emptyParams;
    if (this.tableForm) {
      this.tableForm.handleReset();
    }
    dispatch({ type: "FlowHandle/clearData" });
    this.setState({
        page: { pageNum: 1, pageSize: 10 },
      }, () => {
        this.initData();
      }
    );
  }

  // 签收
  handleTaskclaim = (record = {}) => {
    const { dispatch } = this.props;
    const { taskId } = record;
    dispatch({ type: "FlowHandle/handleTaskclaim", payload: { taskId } }).then(({ errCode }) => {
      if (errCode === 0) {
        this.handleSearch(emptyParams);
      }
    });
  }

  // 退回弹窗
  handleRollbackVisible = (visible, record = '', isQuery = false) => {
    const { taskId } = record || {};
    this.record = record;
    this.taskId = taskId;
    this.setState({ rollbackVisible: visible });
    if (isQuery) {
      this.handleSearch();
    }
  }

  handleOk = (e) => {
    if (e && e.preventDefault) e.preventDefault();
    const {selectedRows} = this.state
    const { handleClose } = this.props;
    if(selectedRows.length !== 1) {
      this.openNotificationWithIcon("warning", "", "请选择一条流程");
    } else {
      handleClose(selectedRows[0])
    }
  };

  handleCancel = () => {
    const { handleClose } = this.props;
    handleClose()
  };

  render() {
    const { rollbackVisible } = this.state;
    const { loading, dispatch, visible } = this.props;
    // const confirmLoading = loading.effects['FlowHandle/handleTask'];
    // const formLoading = loading.effects['FlowHandle/getTaskform'];
    const rollbackLoading = loading.effects['FlowHandle/handleTaskRollback'];
    return (
      <Modal
        title="流程选择"
        visible={visible}
        onOk={this.handleOk}
        onCancel={this.handleCancel}
        width="800px"
        centered
        // confirmLoading={confirmLoading}
        destroyOnClose
      >
        <div style={{height:"500px", overflow: 'auto'}}>
          <SearchTable
            ref={r => {
              if (r) {
                this.tableForm = r;
              }
            }}
            formConfig={this.getFormConfig()}
            handleSearch={this.handleSearch}
            tableProps={this.getAntTableProps({rowSelection:this.rowSelection})}
          />
          {rollbackVisible && (
            <RollbackForm
              visible={rollbackVisible}
              confirmLoading={rollbackLoading}
              onCancel={this.handleRollbackVisible}
              dispatch={dispatch}
              data={this.record}
            />
          )}
        </div>
      </Modal>
    );
  }
}
